layui.use(['form'], function () {
  form = layui.form
  var commentsvm = new Vue({
      el: '#comments',
      data: {
        article_id: '',
        comments: [],
        reply: {
          ShowclickedCommentId: '',
          replyText: '',
          replyPlaceholder: '',
        },
        user_name: '',
        user_id: '',
        ShowReplyContentID: false,
      },
      methods: {
        openReply: function (comment_id, comment_people) {
          if (this.user_name === comment_people) {
            layer.msg('不允许自己回复自己的评论')
            return
          }
          this.reply.replyPlaceholder = this.user_name + '@' + comment_people + ':'
          this.reply.article_id = this.article_id
          this.reply.user = this.user_id
          if (this.reply.ShowclickedCommentId === comment_id) {
            this.reply.ShowclickedCommentId = ''
            return
          }
          this.reply.ShowclickedCommentId = comment_id
        },
        commitReply: function (fid) {
          this.reply.fid = fid
          this.reply.content = this.reply.replyText
          commentsSubmiteVm.replyComments(this.reply)
          this.checkReply()
        },
        checkReply: function () {
          axios.get('/comments/',
            {
              params: {
                'article_id': this.article_id
              }

            }
          ).then((response) => {
            this.comments = response.data
            this.reply.replyText = ''
          })
        },
        openReplyContent: function (comment_id) {
          if (this.ShowReplyContentID === comment_id) {
            this.ShowReplyContentID = ''
            return
          }
          this.ShowReplyContentID = comment_id
        }
      },
      mounted () {
        this.article_id = document.getElementById('comments-box').getAttribute('article_id')
        this.user_id = document.getElementById('comments-box').getAttribute('user_id')
        this.user_name = document.getElementById('comments-box').getAttribute('user_name')
        axios.get('/comments/',
          {
            params: {
              'article_id': this.article_id
            }

          }
        ).then((response) => {
          this.comments = response.data
        })
      }
    }
  )

  var commentsSubmiteVm = new Vue({
    el: '#comments-box',
    data: {
      article_id: '',
      user_id: '',
      commentsBoxContent: '',
    },
    methods: {
      replyComments: function (data) {
        /**
         * data: {
                "article_id": article_id,
                'content': content,
                'user': user_id,
                'fid': fid
            }
         * **/
        if (data.user == 'None') {
          layer.tips(`请<a href="/auth/login/">登陆</a>后评论。`, '#comment-button', {
            tips: [2, '#009688'],
            time: 2000
          })
          return
        }

        axios.post('/comments/', data, {
          headers: {
            'X-CSRFToken': CsrfToken()
          }
        }).then((respone) => {
          // console.log(respone)
          commentsvm.checkReply()
          this.commentsBoxContent = ''
        }).catch(function (error) {
        })
      }
    }, mounted () {
      this.article_id = document.getElementById('comments-box').getAttribute('article_id')
      this.user_id = document.getElementById('comments-box').getAttribute('user_id')
      //提交评论
      // var form = layui.form

      //监听提交
      form.on('submit(commentsForm)', (data) => {
        data.field.article_id = this.article_id
        data.field.user = this.user_id
        this.replyComments(data.field)
        return false
      })
    }
  })

  Vue.component('show-reply-comments', {
    props: ['comments', 'reply', 'fpeople'],
    data: function () {
      return {}
    },
    methods: {
      openReply: function (comment_id, comment_people) {
        commentsvm.openReply(comment_id, comment_people)
      },
      commitReply: function (fid) {
        commentsvm.commitReply(fid)
      }
    },
    template: `
    <div>
    <div v-for="comment of comments">
        <a style="color: #406599" v-text="comment.people" :href="'/author_article/'+ comment.people" target="_blank"></a>@
        <a style="color: #406599" v-text="fpeople" :href="'/author_article/'+ fpeople" target="_blank"></a>
        <span style="color: darkgray;font-size: small" v-text="comment.com_time"></span>
        <p v-text="comment.content"></p>
        <div>
            <a href style="color: #406599" @click.prevent="openReply(comment.id,comment.people)"
                v-text="reply.ShowclickedCommentId != comment.id?'回复':'收起'"></a>
            <div class="layui-form-item" v-show="reply.ShowclickedCommentId === comment.id">
                <div class="layui-input-inline" style="margin-left:0;width: 80%">
                    <input type="text" class="layui-input" style="padding-left: 0;" v-model="reply.replyText"
                        :placeholder="reply.replyPlaceholder">
                </div>
                <button class="layui-btn" style="display: inline-block" @click="commitReply(comment.id)">评论</button>
            </div>
        </div>
           <show-reply-comments :comments="comment.cid" :reply="reply" :fpeople="comment.people"></show-reply-comments>
    </div>
</div>
    `
  })
})

